<template>
  <div>
    <div id="prescription_message_title">&nbsp;&nbsp;
      <span>处方信息</span>
    </div>
    <div id="prescription_message_div">
      <div id="prescription_message_1">
        <div class="prescription_message_1">NO：{{prescription.no}}</div>
        <div class="prescription_message_1">开单时间：{{prescription.join_time}}</div>
        <div class="prescription_message_1" v-if="this.prescription.checked_status == 2">处方单状态：审核中</div>
        <div class="prescription_message_1" v-if="this.prescription.checked_status == 1">处方单状态：审核通过</div>
        <div class="prescription_message_1" v-if="this.prescription.checked_status == 0">处方单状态：审核未通过</div>
      </div>
      <div id="prescription_message_2">
        <div class="prescription_message_2">医生：{{doctorMessage.name}}</div>
        <div class="prescription_message_2">科室：{{doctorMessage.department}}</div>
      </div>
      <div id="prescription_message_3">初步诊断：{{prescription.diagnosis}}</div>
      <div id="prescription_message_4">处理意见：{{prescription.opinion}}</div>
      <div id="prescription_message_5">Rp
        <!-- <el-button type="success" @click="editHandle()" style="margin-left:850px">编辑处方</el-button> -->
        <el-button type="primary" @click="showFormulation()" style="margin-left:950px">查看处方二维码</el-button>
        <el-dialog title="查看处方二维码" :visible.sync="dialogImageVisible">
          <!-- <el-upload class="avatar-uploader" action="http://192.168.8.108:12306/aliyunoss/file/upload" accept=".jpeg,.png,.jpg,.bmp,.gif"
            :show-file-list="false" :on-success="uploadSuccess"> -->
            <el-image style="width: 400px; height: 400px; margin-left:250px" :src="url" fit="scale-down"></el-image>
          <!-- </el-upload> -->
        </el-dialog>
      </div>
      <div id="prescription_message_6" v-for="(medicine,index) in medicines" :key="index">
        <div class="prescription_message_6">{{medicine.name}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x {{medicines_use[index].medicine_quantity}}</div>
        <div class="prescription_message_6">规格：{{medicine.specifications}}</div>
        <div class="prescription_message_6">使用方法：{{medicine.useWay}}，{{medicines_use[index].use_frequency}}，{{medicines_use[index].use_quantity}}</div>
      </div>
      <div id="prescription_message_4" v-if="this.prescription.checked_status==0" style="color:red">审核不通过原因：{{prescription.comment}}</div>
    </div>
    <!-- 编辑处方 -->
    <el-dialog title="编辑处方" :visible.sync="dialogPrescriptionVisible" width="30%">
      <el-form ref="editForm" :model="editForm" label-width="80px">
        <el-form-item label="初步诊断">
          <el-input v-model="editForm.diagnosis"></el-input>
        </el-form-item>
        <el-form-item label="处理意见">
          <el-input v-model="editForm.opinion"></el-input>
        </el-form-item>
        <el-form-item label="费用">
          <el-input v-model="editForm.cost"></el-input>
        </el-form-item>
        <el-form-item label="药品">
          <el-input v-model="editForm.medicineIds" @focus="showMedicines()"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">完成</el-button>
          <el-button type="primary" @click="onCancel()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 编辑药品 -->
    <el-dialog title="选择药品" :visible.sync="dialogMedicinesVisible" width="60%" >
      <el-table ref="singleTable" :data="medicine_all" highlight-current-row style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="药品id"  width="150"></el-table-column>
          <el-table-column prop="name" label="药品名称"  width="150"></el-table-column>
          <el-table-column prop="price" label="药品价格" width="150"></el-table-column>
          <el-table-column prop="specifications" label="药品规格" width="150"></el-table-column>
          <el-table-column prop="description" label="药品描述" width="400"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="close('药品选择')">取消</el-button>
        <el-button size="small" type="primary" class="title" @click="submit('药品选择')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "PrescriptionMessage",
  props: {
    prescription: ''
  },
  data () {
    return {
      medicines: [],
      medicines_use: [],
      medicineIds: [],
      medicine_all: [],
      doctorMessage: '',
      dialogImageVisible: false,
      dialogPrescriptionVisible: false,
      dialogMedicinesVisible: false,
      multipleSelection: [],
      url: '',
      editForm: {
        opinion:'',
        diagnosis:'',
        cost:'',
        medicineIds:''
      },
    }
  },
  methods:{
    //获取对应处方的所有药品id
    getMedicineIds(){
      this.$axios.get('/prescription/findMedicineIdsByPid/'+parseInt(this.prescription.id)).then(res => {
        if(res.data.code == 200){
          this.medicineIds = res.data.data

          //获取对应处方的所有药品
          this.$axios.post('/prescription/batchFind',this.medicineIds).then(res2 => {
            if(res2.data.code == 200){
              this.medicines = res2.data.data
            }
          }).catch();

          //获取对应处方的所有药品使用详情
          this.$axios.post('/prescription/findMedicine_Medicine',this.medicineIds).then(res3 => {
            if(res3.data.code == 200){
              this.medicines_use = res3.data.data
            }
          }).catch();

          //根据医生id获取医生信息
          this.$axios.get('/prescription/findDoctorById/'+this.prescription.doctor_id).then(res4 => {
            if(res4.data.code == 200){
              this.doctorMessage = res4.data.data
            }
          }).catch();
        }
      }).catch();
    },
    getMedicine_all(){
      this.$axios.get('/prescription/medicine').then(res => {
        if(res.data.code == 200){
          this.medicine_all = res.data.data
        }
      }).catch();
    },
    //上传图片的回调
    uploadSuccess(res) {
      this.url = res.data.url;
    },
    showFormulation(){
      this.dialogImageVisible = true;
      this.url = this.prescription.formulation_image
    },
    editHandle(){
      this.dialogPrescriptionVisible = true;
    },
    onSubmit() {
      this.prescription.diagnosis = this.editForm.diagnosis;
      this.prescription.opinion = this.editForm.opinion;
      this.prescription.cost = this.editForm.cost;
      //获取对应处方的所有药品
      this.$axios.post('/prescription/batchFind',this.medicineIds).then(res2 => {
        if(res2.data.code == 200){
          this.medicines = res2.data.data
        }
      }).catch();

      //获取对应处方的所有药品使用详情
      this.$axios.post('/prescription/findMedicine_Medicine',this.medicineIds).then(res3 => {
        if(res3.data.code == 200){
          this.medicines_use = res3.data.data
        }
      }).catch();
      this.dialogPrescriptionVisible = false;
    },
    onCancel(){
      this.dialogPrescriptionVisible = false;
    },
    showMedicines(){
      this.getMedicine_all();
      this.dialogMedicinesVisible = true;
    },
    close(){
      this.dialogMedicinesVisible = false;
    },
    submit(){
      this.medicineIds = this.multipleSelection;
      this.editForm.medicineIds = this.multipleSelection.join(",");
      this.dialogMedicinesVisible = false;
    },
    handleSelectionChange(val) {
      for(let index in val){
        this.multipleSelection[index] = val[index].id;
      }
    },
    
  },
  created () {
    this.getMedicineIds();
  }
}
</script>

<style scoped>
#prescription_message_title {
  margin-right: 200px;
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  background-color: rgb(241, 241, 241);
}
#prescription_message_div {
  border: 1px solid rgb(216, 216, 216);
  margin-right: 200px;
  overflow: hidden;
}
#prescription_message_1,
#prescription_message_2 {
  float: left;
  width: 100%;
}
.prescription_message_1,
.prescription_message_2 {
  float: left;
  width: 500px;
  margin-top: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
}
#prescription_message_3,
#prescription_message_4,
#prescription_message_5,
#prescription_message_6 {
  float: left;
  width: 90%;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
#look {
  float: right;
  margin-right: 10px;
}
</style>
